<!-- Left -->
<template>
  <div class="left j-s a-c">
    <div class="logo">
      <!-- <div class="cards">
        <span v-for="n in 16" :key="n"> </span>
      </div> -->
    </div>
    <div class="seting">
      <el-dropdown circle size="mini" placement="top" @command="handleCommand">
        <span class="el-dropdown-link">
          <!-- 菜单<i class="el-icon-arrow-down el-icon--right"></i> -->
          <el-button
            type="primary"
            icon="el-icon-setting"
            plain
            circle
          ></el-button>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item divided icon="el-icon-delete" command="recycle"
            >回收站</el-dropdown-item
          >
          <el-dropdown-item divided icon="el-icon-scissors" command="piccut"
            >编辑</el-dropdown-item
          >
          <el-dropdown-item divided icon="el-icon-info" command="about"
            >说明</el-dropdown-item
          >
          <el-dropdown-item divided icon="el-icon-refresh-left" command="logout"
            >退出</el-dropdown-item
          >
          <!-- <el-dropdown-item
            divided
            icon="el-icon-folder-delete"
            command="offaccount"
            >注销</el-dropdown-item
          > -->
        </el-dropdown-menu>
      </el-dropdown>
      <!-- <el-button
        @click="dialogVisible = true"
        icon="el-icon-setting"
        circle
        size="medium"
      ></el-button> -->
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>仅供测试</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleCommand(command) {
      //this.$message("click on item " + command);
      if (command == "about") {
        this.dialogVisible = true;
      } else if (command == "recycle") {
        this.$router.push({
          path: "/home/recycle",
        });
      } else if (command == "piccut") {
        this.$router.push({
          path: "/home/piccut",
        });
      } else if (command == "logout") {
        this.$confirm("此操作将退出登录 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$store.dispatch("login/storeToken", "");
            window.sessionStorage.setItem("isAuthenticated", false);
            this.$router.push({
              path: "/",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消退出",
            });
          });
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          _;
          done();
        })
        .catch((_) => {
          _;
        });
    },
  },
};
</script>

<style scoped>
.left {
  /* background-color: aquamarine; */

  /* background-image: linear-gradient(to bottom, #50cc7f 0%, #f5d100 100%); */
  background-color: #505a64;
  display: flex;
  flex-direction: column;
}
.cards {
  width: 60px;
  height: 60px;
  border: 1px dashed black;
}

.cards,
.cards > * {
  box-sizing: border-box;
}
.cards span {
  width: 25px;
  height: 9px;
  background-color: lightgreen;
  position: absolute;
  top: 25px;
  left: 30px;
  border: 0.2px solid dimgray;
  border-radius: 0.3px 0.8px 0.8px 0.3px;
}

.cards span::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 20%;
  background-color: white;
  right: 0;
  border-radius: 0 0.6em 0.6em 0;
  border-left: 0.2em solid silver;
}

.cards span::after {
  content: "";
  position: absolute;
  height: 6px;
  width: 1px;
  background-color: silver;
  left: 19px;
  top: 1px;
  box-shadow: 1px 0 0 -1px silver;
}
.cards span {
  transform-origin: left;
  transform: rotate(calc((var(--n) - 1) * 22.5deg));
}
.cards span:nth-child(1) {
  --n: 1;
}

.cards span:nth-child(2) {
  --n: 2;
}

.cards span:nth-child(3) {
  --n: 3;
}

.cards span:nth-child(4) {
  --n: 4;
}

.cards span:nth-child(5) {
  --n: 5;
}

.cards span:nth-child(6) {
  --n: 6;
}

.cards span:nth-child(7) {
  --n: 7;
}

.cards span:nth-child(8) {
  --n: 8;
}
.cards span:nth-child(9) {
  --n: 9;
}
.cards span:nth-child(10) {
  --n: 10;
}
.cards span:nth-child(11) {
  --n: 11;
}
.cards span:nth-child(12) {
  --n: 12;
}
.cards span:nth-child(13) {
  --n: 13;
}
.cards span:nth-child(14) {
  --n: 14;
}
.cards span:nth-child(15) {
  --n: 15;
}
.cards span:nth-child(16) {
  --n: 16;
}

.cards span {
  background-color: hsl(calc(360 / 16 * var(--n)), 80%, 70%);
}
.cards:hover span {
  animation: rotating 2s ease-in-out forwards;
}
@keyframes rotating {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(calc((var(--n) - 1) * 22.5deg));
  }
}
/* .cards span {
  transform-origin: right;
  animation: rotating 3s linear infinite;
} */
/* .cards span {
  transform-origin: right;
  animation: rotating 3s linear infinite;
} */
/* @keyframes rotating {
  0%,
  35% {
    transform: rotate(0deg);
  }

  90%,
  100% {
    transform: rotate(360deg);
  }
} */

/* .cards span {
  animation-delay: calc((var(--n) - 8) * 0.15s);
} */

.seting {
  margin-bottom: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
</style>
